<template>
  <div class="app-container">
    <!-- 返回按钮 -->
    <div class="mb-4">
      <el-button @click="goBack" icon="ArrowLeft" type="primary">返回订单列表</el-button>
    </div>
    
    <!-- 订单详情展示 -->
    <div v-if="orderData" class="order-details">
      <!-- 订单基本信息 -->
      <el-card class="mb-4" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="text-lg font-bold">订单基本信息</span>
            <el-tag :type="getStatusType(orderData.status)" class="ml-2">
              {{ getStatusText(orderData.status) }}
            </el-tag>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>订单编号:</label>
              <span>{{ orderData.number }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>订单ID:</label>
              <span>{{ orderData.id }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>用户ID:</label>
              <span>{{ orderData.userId }}</span>
            </div>
      </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-3">
          <el-col :span="8">
            <div class="info-item">
              <label>下单时间:</label>
              <span>{{ formatDate(orderData.orderTime) }}</span>
            </div>
      </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>预约时间:</label>
              <span>{{ formatDate(orderData.reservationTime) }}</span>
            </div>
      </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>支付时间:</label>
              <span>{{ formatDate(orderData.payTime) || '未支付' }}</span>
            </div>
      </el-col>
    </el-row>
      </el-card>

      <!-- 服务信息 -->
      <el-card class="mb-4" shadow="hover">
        <template #header>
          <span class="text-lg font-bold">服务信息</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>服务名称:</label>
              <span>{{ orderData.serviceDetailsName || getDefaultServiceName() }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>商家名称:</label>
              <span>{{ orderData.carMerchantName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>车辆ID:</label>
              <span>{{ orderData.carId }}</span>
            </div>
          </el-col>
        </el-row>
        <!-- 服务详情 -->
        <el-row :gutter="20" class="mt-3" v-if="orderData.serviceDetailsIntroduction">
          <el-col :span="24">
            <div class="info-item service-details">
              <label>服务详情:</label>
              <div class="service-details-content">
                {{ orderData.serviceDetailsIntroduction }}
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 客户信息 -->
      <el-card class="mb-4" shadow="hover">
        <template #header>
          <span class="text-lg font-bold">客户信息</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>客户姓名:</label>
              <span>{{ orderData.carUserName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>联系电话:</label>
              <span>{{ orderData.carUserPhone }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 价格信息 -->
      <el-card class="mb-4" shadow="hover">
        <template #header>
          <span class="text-lg font-bold">价格信息</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>服务原价:</label>
              <span class="text-gray-600">¥{{ orderData.serviceDetailsPresentPrice || 0 }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>优惠金额:</label>
              <span class="text-green-600">-¥{{ orderData.carCouponPreferentialMoney || 0 }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>实付金额:</label>
              <span class="text-red-600 font-bold text-lg">¥{{ orderData.price }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-3" v-if="orderData.couponId">
          <el-col :span="8">
            <div class="info-item">
              <label>优惠券ID:</label>
              <span>{{ orderData.couponId }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 核销信息 -->
      <el-card class="mb-4" shadow="hover" v-if="orderData.verificationCode">
        <template #header>
          <span class="text-lg font-bold">核销信息</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>核销码:</label>
              <span class="font-mono">{{ orderData.verificationCode }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item" v-if="orderData.verificationImg">
              <label>核销码图片:</label>
              <el-image 
                :src="orderData.verificationImg" 
                :preview-src-list="[orderData.verificationImg]"
                style="width: 100px; height: 100px"
                fit="cover"
                class="ml-2"
              />
        </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 订单状态信息 -->
      <el-card class="mb-4" shadow="hover">
        <template #header>
          <span class="text-lg font-bold">订单状态</span>
      </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>支付状态:</label>
              <el-tag :type="getPayStatusType(orderData.payStatus)">
                {{ getPayStatusText(orderData.payStatus) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>评价状态:</label>
              <el-tag :type="getEvaluateStatusType(orderData.evaluate)">
                {{ getEvaluateStatusText(orderData.evaluate) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>删除状态:</label>
              <el-tag :type="orderData.deleted === 0 ? 'success' : 'danger'">
                {{ orderData.deleted === 0 ? '正常' : '已删除' }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 数据加载失败提示 -->
    <el-empty v-else description="订单数据加载失败" />
  </div>
</template>
<script setup name="OrderManagementDetails">
import { ref, onMounted, watch, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { parseTime } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

// 从路由参数中获取订单数据
const orderData = ref(null)

// 加载订单数据的函数
function loadOrderData() {
  try {
    if (route.query.orderData) {
      orderData.value = JSON.parse(route.query.orderData)
      console.log('订单数据已更新:', orderData.value)
    } else {
      orderData.value = null
    }
  } catch (error) {
    console.error('解析订单数据失败:', error)
    if (proxy && proxy.$modal) {
      proxy.$modal.msgError('订单数据加载失败')
    }
    orderData.value = null
  }
}

// 初始化数据
onMounted(() => {
  loadOrderData()
})

// 监听路由参数变化，当切换到不同订单时重新加载数据
watch(
  () => [route.query.orderData, route.query.orderId],
  ([newOrderData, newOrderId], [oldOrderData, oldOrderId]) => {
    // 当订单数据或订单ID发生变化时，重新加载数据
    if (newOrderData !== oldOrderData || newOrderId !== oldOrderId) {
      console.log('检测到路由参数变化，重新加载订单数据')
      console.log('订单ID变化:', oldOrderId, '->', newOrderId)
      loadOrderData()
    }
  },
  { immediate: false }
)

/** 返回按钮操作 */
function goBack() {
  router.back()
}

/** 格式化日期 */
function formatDate(date) {
  if (!date) return '无'
  return parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
}

/** 获取订单状态类型 */
function getStatusType(status) {
  const statusMap = {
    0: 'warning',  // 待支付
    1: 'primary',  // 已支付
    2: 'success',  // 已完成
    3: 'danger'    // 已取消
  }
  return statusMap[status] || 'info'
}

/** 获取订单状态文本 */
function getStatusText(status) {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '未知'
}

/** 获取支付状态类型 */
function getPayStatusType(payStatus) {
  const statusMap = {
    0: 'warning',  // 未支付
    1: 'success',  // 已支付
    2: 'danger'    // 支付失败
  }
  return statusMap[payStatus] || 'info'
}

/** 获取支付状态文本 */
function getPayStatusText(payStatus) {
  const statusMap = {
    0: '未支付',
    1: '已支付',
    2: '支付失败'
  }
  return statusMap[payStatus] || '未知'
}

/** 获取评价状态类型 */
function getEvaluateStatusType(evaluate) {
  return evaluate === 'Y' ? 'success' : 'info'
}

/** 获取评价状态文本 */
function getEvaluateStatusText(evaluate) {
  return evaluate === 'Y' ? '已评价' : '未评价'
}

/** 获取默认服务名称 */
function getDefaultServiceName() {
  // 根据路由来源判断默认服务名称
  const referrer = document.referrer
  if (referrer.includes('carwash')) {
    return '专业洗车'
  } else if (referrer.includes('maintenance')) {
    return '汽车保养'
  } else if (referrer.includes('border')) {
    return '汽车维修'
  }
  return '汽车服务'
}
</script>

<style scoped>
.order-details {
  max-width: 1200px;
  margin: 0 auto;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.info-item label {
  font-weight: 600;
  color: #606266;
  min-width: 120px;
  margin-right: 12px;
}

.info-item span {
  color: #303133;
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: 700;
}

.text-gray-600 {
  color: #6b7280;
}

.text-green-600 {
  color: #059669;
}

.text-red-600 {
  color: #dc2626;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.mt-3 {
  margin-top: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.ml-2 {
  margin-left: 8px;
}

.service-details {
  flex-direction: column;
  align-items: flex-start;
}

.service-details label {
  margin-bottom: 8px;
}

.service-details-content {
  background: #f5f7fa;
  padding: 12px 16px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
  line-height: 1.6;
  color: #303133;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
